<template>
    <el-descriptions :column="1" border class="mi_descriptions mb20">
        <el-descriptions-item
            label="批量操作"
        >
            <el-space wrap v-if="!data.formShow">
                <el-button link
                           type="primary"
                           @click="showBatchForm(vo.name)"
                           v-for="vo in editCols" :key="vo.title"
                >
                    {{vo.title}}
                </el-button>
            </el-space>

            <el-space v-else>

                <mi-up-image v-if="data.current=='image'" v-model="data.batchValue" size="60px" />
                <mi-input v-else v-model="data.batchValue"  />
                <el-button type="primary" @click="saveValue">确定</el-button>
                <el-button @click="hiddenForm">取消</el-button>

            </el-space>

        </el-descriptions-item>
    </el-descriptions>
</template>

<script setup lang="ts">

import {inject, reactive, ref} from "vue";
import Edit from "@/model/edit";
import {skuEditCols} from "@/service/goodsService";
const edit = inject("edit", new Edit({}))
const editCols = skuEditCols
const data = reactive({
    formShow: false,
    current: '',
    batchValue: '',
})


// 批量修改规格值
const showBatchForm = (key:string) => {
    data.current = key
    data.formShow = true

}

const saveValue = () => {
    if (data.batchValue){
        edit.info.skus.forEach((item:any) => {

            console.log(data.current, data.batchValue)

            item[data.current] = data.batchValue
        })
    }
    hiddenForm()
}

const hiddenForm = () => {
    data.formShow = false
    data.current = ''
    data.batchValue = ''
}
</script>

<style scoped>

</style>
